<template xmlns:el-col="http://www.w3.org/1999/html" xmlns:el-table="http://www.w3.org/1999/html">
  <div class="employee-container">
    <div style="background: #faf0e6;opacity: .8;margin-top:-10px;height: 30px">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '../shouYe' }"style="margin-left: 30px;margin-top: 8px">首页</el-breadcrumb-item>
        <el-breadcrumb-item style="margin-top: 8px"><i class="fa fa-server" aria-hidden="true"></i>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item style="margin-top: 8px"><i class="el-icon-s-custom" aria-hidden="true"></i>员工信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    </div>

    <el-row>
  <el-form label-width="80px">
    <el-row>
      <el-col :span="8" style="margin-top: 10px">
        <el-form-item label="员工姓名" label-width="80px">
          <el-input style="height: 8%"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" style="margin-top: 10px">
        <el-form-item label="所在部门" label-width="80px">

          <!--选择器开始-->
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--选择器结束-->


        </el-form-item>
      </el-col>
      <el-col :span="8" style="margin-top: 10px">
        <el-form-item>
          <el-button type="success" style="background-color: cornflowerblue">
            <i class="fa fa-search" aria-hidden="true"></i>
            搜索Search
          </el-button>
          <!-- <el-button type="success" style="background-color: cornflowerblue">搜索</el-button>-->
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-row>
  <el-row>
    <!--按钮组-->
    <el-button-group>
      <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加</el-button>
      <el-button type="warning" icon="el-icon-share">修改</el-button>
      <el-button type="danger" icon="el-icon-delete">删除</el-button>
    </el-button-group>
    <!--按钮组-->

    <el-table :data="tableData"
              border
              stripe
              @row-dblclick="handleDoubleClick"
              style="width :100%;height: 60%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        sortable
      ></el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
      ></el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="电话号码"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
      ></el-table-column>
      <el-table-column
        prop="department"
        label="部门"
      ></el-table-column>
      <el-table-column
        prop="position"
        label="职位"
      ></el-table-column>
    </el-table>

    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>

      <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>

  </el-row>


  <!--模态窗体-->
  <el-dialog
    :visible.sync="dialogVisible"
    :title="info.title"
    width="30%"
    :before-close="handleClose">
    <el-form>
      <el-form-group>
        <el-form-item label-width="80px" label="员工姓名">
          <el-input v-model="employee.name" />
        </el-form-item>
      </el-form-group>
      <el-form-group>
        <el-form-item label-width="80px" label="电话号码">
          <el-input v-model="employee.phoneNumber"/>
        </el-form-item>
      </el-form-group>
      <el-form-group>
        <el-form-item label-width="80px" label="所处地址">
          <el-input v-model="employee.address"/>
        </el-form-item>
      </el-form-group>
      <el-form-group>
        <el-form-item label-width="80px" label="部门">
          <!--选择器开始-->
          <el-select v-model="employee.department" placeholder="请选择">
            <el-option
              v-for="item in employee.options1"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
          <!--选择器结束-->
          <!--<el-input v-model="employee.department"/>-->
        </el-form-item>
      </el-form-group>
      <el-form-group>
        <el-form-item label-width="80px" label="职位">
          <!--选择器开始-->
          <el-select v-model="employee.position" placeholder="请选择">
            <el-option
              v-for="item in employee.options2"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
          <!--选择器结束-->
          <!--  <el-input v-model="employee.position"/>-->
        </el-form-item>
      </el-form-group>
    </el-form>
    <span  class="dialog-footer" slot="footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button @click="submitHandle" type="primary" >确 定</el-button>
  </span>
  </el-dialog>
  <!--模态窗体-->
  </div>
</template>

<script>

  export default {
    name: "Employee", data() {
      return {
        options: [{
          value: '选项1',
          label: '行政部'
        }, {
          value: '选项2',
          label: '人事部'
        }, {
          value: '选项3',
          label: '开发部'
        }, {
          value: '选项4',
          label: '后勤部'
        }],
        value: '',

        tableData: [],
        dialogVisible: false,
        info:{
          title:'员工添加'

        },
        employee: {
          id:-1,
          name: '',
          age: '',
          gender: '',
          phoneNumber: '',
          email: '',
          address: '',
          department: '',
          position: '',

          /*选项*/
          options1: [{
            value: '选项1',
            label: '行政部'
          }, {
            value: '选项2',
            label: '人事部'
          }, {
            value: '选项3',
            label: '财务部'
          }, {
            value: '选项4',
            label: '后勤部'
          }],
          options2: [{
            value: '选项1',
            label: '销售经理'
          }, {
            value: '选项2',
            label: '总裁助理'
          }, {
            value: '选项3',
            label: '车间主任'
          }, {
            value: '选项4',
            label: '人力资源总监'
          }, {
            value: '选项5',
            label: '技术部长'
          }
          ],
          value: ''
          /*选项*/
        }

      }
    }, mounted() {
      /*挂载结束之后*/
      var _this = this;
      this.axios({
        url: 'http://localhost:3000/employee/list',
        method: 'get'
      }).then(function (res) {
        _this.tableData = res.data;
      })
    }, methods: {
      btnAddClick() {
        this.info.title='员工添加';
        this.employee.id = -1;
        this.dialogVisible = true;
      },
      handleClose() {
        this.dialogVisible = false;
      }, submitHandle() {
        var _this = this;
        this.axios({
          url: 'http://127.0.0.1:3000/employee/add',
          method: 'get',
          params: {
            id:this.employee.id,
            name: this.employee.name,
            age: this.employee.age,
            gender: this.employee.gender,
            phoneNumber: this.employee.phoneNumber,
            email: this.employee.email,
            address: this.employee.address,
            department: this.employee.department,
            position: this.employee.position
          }
        }).then(function (res) {
          if (res.data.flag) {
            _this.tableData = res.data.emps;
            _this.$message('操作成功')
            _this.dialogVisible = false;
          } else {
            alert('操作失败');
          }
        })
      },handleDoubleClick(row){
        //alert(row.id);
        this.employee =row;
        this.info.title='员工修改';
        this.dialogVisible =true;
      }
    }

  }
</script>

<style scoped>

</style>

